﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="application-name" content="SQL在线测试平台" />
    <meta name="author" content="吴名星" />
    <meta name="keywords" content="SQL在线测试,SQL Server,SQL实训" />
    <title>数据库SQL在线训练系统后台登陆</title>
    <link rel="shortcut icon" type="image/ico" href="images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"  />
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"  />
    <link rel="stylesheet" type="text/css" href="../css/table.css"  />
    <script type="text/javascript" src="../easyui/jquery.min.js" ></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js" ></script>
    <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script>
    <script type="text/javascript" src="../js/common.js" ></script>
    <style type="text/css">
        body
        {
            background: url(/admin/images/main.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .code
        {
            background-color: White;
            font-family: Arial;
            font-style: italic;
            color: Red;
            border: 0;
            padding: 2px 3px;
            letter-spacing: 3px;
            font-weight: bolder;
            cursor: pointer;
            width: 60px;
        }

        .unchanged
        {
            border: 0;
        }
    </style>
    <!--[if lt IE 8]>
	<script type="text/javascript">
		window.location.href="./ie8.html";
	</script>
	<![endif]-->
    <script type="text/javascript">
        var city;           //访问者所在城市
        $(function () {
            $("#loginDialog").dialog({
                title: "登录系统",
                iconCls: 'icon-login',
                closable: false,
                modal: true,
                width: 400,
                height: 240,
                buttons: [{
                    id: "loginBtn",
                    text: "登 录",
                    iconCls: 'icon-login',
                    handler: function () {
                        if ($("#loginFrm").form('validate')) {
                            $("#loginFrm").submit();
                        }
                    }
                }]
            });
            
            //调用新浪api获取用户所在城市
            $.ajax({
                url: "http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js",
                type: "get",
                dataType: "script",
                timeout: 2000,    //2s请求不到新浪的api就停止发送请求，进入error回调函数
                success: function (result) {
                    try {
                        city = remote_ip_info.city == remote_ip_info.province ? remote_ip_info.province : remote_ip_info.province + remote_ip_info.city;
                        getiflogin();
                    } catch (e) {
                        city = "未知";
                        getiflogin();
                    }
                },
                error: function (data, textStatus, jqXHR) {
                    city = "未知";
                    getiflogin();
                }
            });

            var url = location.href;
            //登录
            $("#loginFrm").form({
                url: 'ashx/rm_login.ashx',
                onSubmit: function (param) {
                    param.action = "login";
                    param.city = city;    //访问者所在城市
                    return checkInput();   //验证码是否正确
                },
                success: function (data) {
                    var result = eval('(' + data + ')');  //字符串转json
                    if (result.success) {
                        if (url.indexOf("ReturnUrl=") != -1) {
                            window.location.href = decodeURIComponent(url.substring(url.indexOf("ReturnUrl=") + 10));
                        }
                        else {
                            window.location.href = "index.html";
                        }
                    } else {
                        $.show_warning("提示", result.msg);
                        $('#loginBtn').linkbutton('enable');
                        createCode();   //刷新验证码
                        $("#loginVerificationCode").val("");
                    }
                }
            })

            //回车提交表单
            $("#loginFrm").find('input').on('keyup', function (event) {
                if (event.keyCode == '13') {
                    //登录按钮如果处于禁用状态，那么回车也不提交表单
                    if (!($('#loginBtn').linkbutton("options").disabled) && $("#loginFrm").form('validate')) {
                        $("#loginFrm").submit();
                    }
                }
            })
            createCode();  //创建验证码
        })

        function getiflogin() {
            $.ajax({
                url: "ashx/rm_login.ashx",
                type: "post",
                dataType: "json",
                data: "action=iflogin&city=" + city,
                success: function (result) {
                    if (result.success) {
                        window.location.href = "index.html";
                    }
                },
                beforeSend: function () {
                    $('#loginBtn').linkbutton('disable');   //点击登陆后先禁用登录按钮，防止连击
                },
                complete: function () {
                    $('#loginBtn').linkbutton('enable');
                }
            });
        }

        //创建验证码
        var code;
        function createCode() {
            code = "";
            var codeLength = 4;     //验证码长度   
            var checkCode = document.getElementById("checkCode");
            var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
            for (var i = 0; i < codeLength; i++) {
                var charIndex = Math.floor(Math.random() * 36);
                code += selectChar[charIndex];
            }
            if (checkCode) {
                checkCode.className = "code";
                checkCode.value = code;
                //$("#loginVerificationCode").val(code);   //自动填写验证码
            }
        }

        //检查验证码
        function checkInput() {
            if ($.trim($("#loginVerificationCode").val()) == "") {
                $("#msg").text("验证码不能为空");
                $("#msg").stop(true, true).animate({ opacity: "show" }, 300, function () {//.stop使动画达到末尾，否则连按回车一直显示隐藏
                    $("#msg").animate({ opacity: "hide" }, 2000);
                });
                $("#loginVerificationCode").val("").focus();
                return false;
            }
            else if (document.getElementById("loginVerificationCode").value.toUpperCase() != code) {
                $("#msg").text("验证码错误@_@！");
                $("#msg").stop(true, true).animate({ opacity: "show" }, 300, function () {
                    $("#msg").animate({ opacity: "hide" }, 2000);
                });
                $("#loginVerificationCode").val("").focus();
                createCode();       //刷新验证码
                return false;
            } else {
                $('#loginBtn').linkbutton('disable');
                return true;
            }
        }
    </script>
</head>
<body class="easyui-layout" >
    <div id="loginDialog" style="padding: 15px; text-align: center">
        <form id="loginFrm" method="post">
            <table class="tableForm" style="width: 100%">
                <tr>
                    <th>用户名：
                    </th>
                    <td>
                        <input type="text" name="loginName" class="easyui-textbox" data-options="required:true" />
                    </td>
                </tr>
                <tr>
                    <th>密&nbsp;码：
                    </th>
                    <td>
                        <input type="password" name="loginPwd" class="easyui-textbox" data-options="required:true" />
                    </td>
                </tr>
                <tr>
                    <th>验证码：
                    </th>
                    <td>
                        <input type="text"  class="easyui-textbox"  id="loginVerificationCode" autocomplete="off" />
                        <input type="text" onclick="createCode(); $('#loginVerificationCode').val('').focus();"
                            readonly="readonly" id="checkCode" class="unchanged" title="点击刷新验证码" />

                    </td>
                </tr>  
                <tr>
                    <th>测试用户：
                    </th>
                    <td>
                       用户名:user01,密码123456
                    </td>
                </tr>                
            </table>
            <div id="msg" style="color: Red"></div>
        </form>
    </div>
</body>
</html>
